<template>
  <div class="right-out">
    <ul class="nav">
      <li class="nav-item">
        优惠管理
        <span class="nav-bot"></span>
      </li>
    </ul>
    <div class="content">
      <el-form label-width="100px" inline>
        <el-form-item>
          <el-input
            class="serch-inp"
            :prefix-icon="Search"
            size="large"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="info" plain size="large">搜索</el-button>
        </el-form-item>
        <el-form-item label="商品类型：">
          <el-select v-model="value">
            <el-option label="全部" :value="0"></el-option>
            <el-option label="视频课" :value="1"></el-option>
            <el-option label="线下课" :value="2"></el-option>
            <el-option label="直播课" :value="3"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="addGoods">
        <div class="left">添加优惠商品 <span class="num">0</span> 件</div>
        <el-button
          class="right"
          size="default"
          @click="dialogFormVisible = true"
          >+ 添加优惠价商品</el-button
        >
      </div>
      <el-table
        height="250"
        class="table"
        style="width: 100%"
        :header-cell-style="{
          background: '#f5f7f9',
          color: '#393939',
          fontWeight: '400',
          fontSize: '12px',
        }"
      >
        <el-table-column
          prop="date"
          label="内容"
          width="290px"
          align="center"
        />
        <el-table-column
          prop="date"
          label="发布时间"
          width="95px"
          align="center"
        />
        <el-table-column
          prop="name"
          label="开课时间"
          width="95px"
          align="center"
        />
        <el-table-column
          prop="address"
          label="优惠时间"
          width="130px"
          align="center"
        />
        <el-table-column
          prop="address"
          label="原价"
          width="80px"
          align="center"
        />
        <el-table-column
          prop="address"
          label="优惠价"
          width="80px"
          align="center"
        />
        <el-table-column
          prop="address"
          label="平台服务费"
          width="90px"
          align="center"
        />
        <el-table-column
          prop="address"
          label="操作"
          width="100px"
          align="center"
        />
      </el-table>
    </div>
  </div>
  <!-- 对话框 -->
  <el-dialog v-model="dialogFormVisible" title="添加优惠价" width="60%">
    <el-form inline>
      <el-form-item>
        <el-input
          class="serch-inp"
          :prefix-icon="Search"
          size="large"
          :style="{ width: '270px' }"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="info"
          plain
          size="large"
          :style="{ border: 'none', marginLeft: '-15px' }"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>
    <el-form label-width="90px">
      <el-form-item label="商品类型：">
        <el-select v-model="value" :style="{ width: '120px' }">
          <el-option label="全部" :value="0"></el-option>
          <el-option label="视频课" :value="1"></el-option>
          <el-option label="线下课" :value="2"></el-option>
          <el-option label="直播课" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-table
        height="250"
        class="table"
        style="width: 100%"
        :header-cell-style="{
          background: '#f5f7f9',
          color: '#393939',
          fontWeight: '400',
          fontSize: '12px',
        }"
      >
        <el-table-column
          prop="date"
          label="内容"
          width="250px"
          align="center"
        />
        <el-table-column
          prop="date"
          label="发布时间"
          width="150px"
          align="center"
        />
        <el-table-column
          prop="name"
          label="开课时间"
          width="150px"
          align="center"
        />
        <el-table-column
          prop="address"
          label="价格   "
          width="150px"
          align="center"
        />
        <el-table-column
          prop="address"
          label="取消全选"
          width="150px"
          align="center"
        />
      </el-table>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
        <el-button type="primary" @click="addGoodsConfirm">加入优惠</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
export default {
  name: "Resource",
};
</script>

<script setup lang="ts">
import { ref } from "vue";
import { Search } from "@element-plus/icons-vue";
const value = ref(0);
const dialogFormVisible = ref(false);

const addGoodsConfirm = () => {
  dialogFormVisible.value = false;
};
</script>

<style scoped lang="scss">
.right-out {
  .nav {
    width: 1020px;
    background-color: white;
    border-radius: 3px;
    font-size: 14px;
    box-sizing: border-box;
    margin-bottom: 10px;
    display: flex;
    .nav-item {
      padding: 28px 30px;
      position: relative;
      cursor: pointer;
      .nav-bot {
        width: 37px;
        height: 4px;
        background-color: #ff36b7;
        display: inline-block;
        position: absolute;
        left: 0px;
        right: 0px;
        bottom: 0px;
        margin: auto;
      }
    }
  }
  .content {
    width: 1020px;
    min-height: 700px;
    background-color: white;
    border-radius: 3px;
    padding: 30px;
    box-sizing: border-box;
    .el-form {
      .serch-inp {
        width: 300px;
      }
      .el-button {
        border: none;
        margin-left: -20px;
        margin-right: 40px;
      }
      .el-select {
        width: 120px;
      }
    }
    .addGoods {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      .left {
        font-size: 14px;
        padding-top: 13px;
        .num {
          color: #f93684;
        }
      }
      .right {
        padding: 9px 15px;
        font-size: 12px;
        padding: 9px 15px;
        background-color: #f93684;
        border-radius: 3px;
        color: white;
        cursor: pointer;
      }
    }
  }
}
</style>
